/**
 * Created by xiniu on 2017/8/30.
 *待关闭页面 可以的操作为同意关闭，和重新解决
 */

import React, {Component, PropTypes} from 'react';
import {
    Image,
    StyleSheet,
    Text,
    View,
    ListView,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    NativeModules,
    Modal,
    Platform
} from 'react-native';

import Toast from "react-native-simple-toast";
import AppService from "../service/AppService";
import moment from "moment";
import resolve from './resolve';
import MySuggestList from './MySuggestList';
import CoordinationList from './CoordinationList';
import SuggestContent from './components/SuggestContent';
import CommentList from './components/CommentList';
import RString from '../language/RString';
export default class agreeClose extends Component {
    // 初始化
    constructor(props){
        super(props);
        this.state = {
            title:RString('close_suggest'),
            suggestId:this.props.id,
            suggest:{},
            isProject:false,
            modalShow:false,
            filePath:null,
            completeImgList:[],
            completeImgIdList:[],
            completeUploadIdList:[]
        };
    };

    componentWillMount() {
        let _this = this;
        let vm = {
            businessType:"PROJECT",
            businessId: this.state.suggestId
        };
        // 获取该提案的完成情况图片
        AppService.getUploadImage(vm).then(data =>{
            if (!!data.errors === true && !!data.errors.length > 0) {
                Toast.show(data.errors[0].message);
            } else {
                _this.setState({
                    completeImgList:data.attachmentList
                });
                data.attachmentList.map(function (ele,idx) {
                    _this.state.completeImgIdList.push(ele.id);
                    _this.setState({
                        completeUploadIdList:_this.state.completeImgIdList
                    });
                })
            }
        });
    }

    judgeProject(suggest){
        this.setState({
            isProject: suggest.isProject,
            suggest:suggest
        });
    };

    // 放大图片
    enlargeImg(url) {
        this.setState({
            modalShow:true,
            filePath:url
        });
    }

    // 渲染图片
    renderImage = (v, i) =>{
        return (
             <TouchableOpacity onPress={() => this.enlargeImg(v.filePath)} key={i}>
                 <Image style={styles.uploadImg} source={{uri: v.filePath}}/>
             </TouchableOpacity>
        )
    };

    // 关闭弹窗
    closeModal() {
        this.setState({
            modalShow:false
        });
    }

    goBack = () => {
        const{navigator} = this.props;
        if(navigator){
            navigator.pop();
        }
    };

    goToResolve = () => {
        global.completeUploadIdList=this.state.completeUploadIdList;
        const{navigator} = this.props;
        if(navigator){
            navigator.push({
                name: "resolve",
                component:resolve,
                params :{
                    id:this.props.id,
                    dealMethod:this.state.suggest.dealMethod,
                    reopenDescription:this.state.suggest.reopenDescription
                }
            });
        }
    };

    doClose = () => {
        NativeModules.system.navTo("BACK");
    };

    ensureClose = () => {
        let _this = this;
        const{navigator} = this.props;
        let vm = {
            businessId:this.state.suggestId,
            businessType: 'DOCK',
            anonymous: false,
            userId: global.userId,
            content: global.userName + RString('agree_close')
        };

        // 创建评论
        AppService.createCommentRecord(vm).then(data => {
            if (!!data.errors === true && !!data.errors.length > 0) {
                Toast.show(data.errors[0].message);
            } else {
                AppService.updateClose({
                    id:_this.state.suggest.id,
                    rowVersion:_this.state.suggest.rowVersion
                }).then(res => {
                    if (!!res.errors === true && !!res.errors.length > 0) {
                        Toast.show(res.errors[0].message);
                    } else {
                        Toast.show(RString('agree_success'));
                        if(navigator){
                            if (global.isCoordinator) {
                                navigator.push({
                                    name: "CoordinationList",
                                    component: CoordinationList
                                })
                            } else {
                                navigator.push({
                                    name: "MySuggestList",
                                    component:MySuggestList
                                });
                            }
                        }
                    }
                });
            }
        });
    };

    render() {
        return (
            <View style={{ position:'relative',flex:1 }}>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={this.state.modalShow}
                    onShow={() => {}}
                    onRequestClose={() => {}} >
                    <TouchableOpacity activeOpacity={1} style={styles.modalLayout} onPress={()=>{this.closeModal()}}>
                        <Image style={styles.modalView}  source={{uri:this.state.filePath+"?x-oss-process=image/resize,m_lfit,w_640,h_640"}} resizeMode="contain"></Image>
                    </TouchableOpacity>
                </Modal>
                <View style={styles.commonHeader}>
                    <TouchableOpacity onPress={this.goBack.bind(this)} style={styles.back}>
                        <Image source={require('./img/leftArrow.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.doClose.bind(this)} style={styles.toIndex}>
                        <Image source={require('./img/chahao.png')}/>
                    </TouchableOpacity>
                    <View style={{ justifyContent:'center' }}>
                        <Text style={{ color:'#fff',fontSize:16 }}>{this.state.title}</Text>
                    </View>
                </View>
                <ScrollView style={styles.wrap}>
                    <SuggestContent suggestId={this.state.suggestId} judgeProject={this.judgeProject.bind(this)}/>
                    <View style={{ flex:1 }}>
                        <View style={styles.comment}>
                            <Text style={{ color:'#000' }}>{RString('complete')}</Text>
                        </View>
                        <View style={{flex:1,padding:20,flexDirection:'row'}}>
                            <View style={styles.imgWrap}>
                                <Image style={styles.themeImg} source={require('./img/completion.png')}/>
                            </View>
                            <View style={{ flex:8 }}>
                                <Text style={styles.detailFont}>{this.state.suggest.dealMethod ? this.state.suggest.dealMethod : RString('no_completion') }</Text>
                                {this.state.completeImgList.length > 0 && <View style={styles.suggestImgWrap}>
                                    {this.state.completeImgList.map((v, i) => this.renderImage(v, i))}
                                </View>}
                            </View>
                        </View>
                    </View>
                    <View style={{ flex:1,marginBottom:30 }}>
                        <View style={styles.comment}>
                            <Text style={{ color:'#000' }}>{RString('comment')}</Text>
                        </View>
                        <CommentList suggestId={this.state.suggestId}/>
                    </View>
                </ScrollView>
                <View style={styles.buttonWrap}>
                    <View style={{ flex:1,flexDirection:'row',justifyContent:'flex-start' }}>
                        <TouchableOpacity style={styles.editBtn} onPress={this.goToResolve.bind(this)}>
                            <Text style={{ color:'#424242' }}>{RString('resolve')}</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex:1,flexDirection:'row',justifyContent:'flex-end' }}>
                        <TouchableOpacity style={styles.distributeBtn} onPress={this.ensureClose.bind(this)}>
                            <Text style={{ color:'#fff' }}>{RString('ensure_close')}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    };
}

const styles = StyleSheet.create({
    modalLayout:{
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height,
        backgroundColor:'rgba(0,0,0,.8)'
    },
    modalView:{
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height
    },
    wrap:{
        backgroundColor:'#fff'
    },
    commonHeader:{
        height: Platform.OS === 'android'? 50 : 60,
        paddingTop: Platform.OS === 'ios'? 20 : 0,
        backgroundColor:'#333238',
        flexDirection:'row',
        justifyContent:'center',
        position:'relative'
    },
    back:{
        width:30,
        position:'absolute',
        left:20,
        top:0,
        height: Platform.OS === 'android'? 50 : 60,
        paddingTop: Platform.OS === 'ios'? 20 : 0,
        justifyContent:'center'
    },
    toIndex:{
        width:30,
        position:'absolute',
        left:70,
        top:0,
        height: Platform.OS === 'android'? 50 : 60,
        paddingTop: Platform.OS === 'ios'? 20 : 0,
        justifyContent:'center'
    },
    detailWrap :{
        flex: 1,
        paddingLeft:10,
        paddingRight:10
    },
    detail : {
        paddingLeft:10,
        flexDirection: 'row'
    },
    detailTop:{
        paddingLeft:10,
        paddingRight:6,
        borderBottomWidth:1,
        borderStyle:'solid',
        borderBottomColor:'#eee',
        flexDirection: 'row'
    },
    imgWrap:{
        flex:1,
        justifyContent: 'center'
    },
    themeImg:{
        width:20,
        height:20
    },
    wordWrap:{
        flex:8,
        borderBottomWidth:1,
        borderStyle:'solid',
        borderBottomColor:'#eee',
        paddingTop:15,
        paddingBottom:15,
        flexDirection: 'row'
    },
    lastWordWrap:{
        flex:8,
        paddingTop:15,
        paddingBottom:15,
        flexDirection: 'row'
    },
    detailFont:{
        fontSize:16,
        color:'#000'
    },
    detailFontBold:{
        fontWeight:'bold',
        fontSize:16,
        color:'#000'
    },
    detailTime:{
        fontSize:14,
        color:'#999'
    },
    uploadImg:{
        width:80,
        height:80,
        marginRight:10,
        marginBottom:10
    },
    comment:{
        flex:1,
        height:25,
        paddingLeft:20,
        paddingRight:20,
        backgroundColor:'#ECECF1',
        justifyContent: 'center'
    },
    buttonWrap:{
        width:Dimensions.get('window').width,
        height:55,
        position:'absolute',
        left:0,
        bottom:0,
        backgroundColor:'#F5F5F5',
        paddingLeft:20,
        paddingRight:20,
        paddingTop:10,
        paddingBottom:10,
        flexDirection:'row'
    },
    editBtn:{
        width:100,
        borderWidth:0.5,
        borderStyle:'solid',
        borderColor:'#333',
        borderRadius:5,
        paddingTop:8,
        paddingBottom:8,
        flexDirection:'row',
        justifyContent:'center'
    },
    distributeBtn:{
        width:100,
        borderRadius:5,
        paddingTop:8,
        paddingBottom:8,
        backgroundColor:'#3399FF',
        flexDirection:'row',
        justifyContent:'center'
    },
    uploadImg:{
        width:80,
        height:80,
        marginRight:10,
        marginBottom:10
    },
    suggestImgWrap:{
        flex:1,
        marginTop:20,
        flexDirection: 'row',
        flexWrap:'wrap'
    },
    commentWrap:{
        flex:1,
        padding:20
    }
});

